import React, { Component } from 'react';
import axios from './../../axios';
import { 
	Card,
	ConfigProvider,
	Pagination,
	Table,
	Modal,
	Form,
	Input,
	Button,
	message,
	Tag
} from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import zhCN from 'antd/es/locale/zh_CN';

class IpPage extends Component {
	state = {
		dataSource: [],//列表数据
		count: 0,//列表总条数
		requestParams: {//请求列表数据的参数
			field: "", 
			value: "", 
			page: 1, 
			limit: 10
		},
		pageSizeOptions:["10","20","50"],//表格显示每页多少条分页记录数
		isCreateVisible: false,//模态框
		formTitle: "添加api",//模态框标题
	}
	
	formRef = React.createRef();//创建和修改模态框表单
	searchFormRef = React.createRef();//搜索信息表单
	
	//获取列表数据
	requestList = (data) => {
		axios.ajax({
			url: "/Manager/PermitMng/apiRetrieve", 
			method: "post",
			data: data,
		}).then(res=>{
			if(res.code === 0){
				//Table的数据没有key就报错，自己加一个key
				let resData = res.result.data.map((item, index)=>{
					let key = index;
					return {...item, key}
				})
				this.setState({
					dataSource: resData,
					count: res.result.count
				})
			}
		}).catch(err=>{
		})
	}
	
	//分页功能，点击某页
	pageChange= (current, pageSize) => {
		let data = {...this.state.requestParams};
		data.page = current;
		data.limit = pageSize;
		this.setState({
			requestParams: data
		})
		this.requestList(data);
	}
	
	//分页功能，选择每页显示几个
	pageSizeChange = (current, pageSize) => {
		let data = {...this.state.requestParams};
		data.page = 1;
		data.limit = pageSize;
		this.setState({
			requestParams: data
		})
		this.requestList(data);
	}
	
	//点击添加按钮
	handleCreate = () => {
		this.setState({
			isCreateVisible: true,
			formTitle: "添加api"
		});
		setTimeout(()=>{//添加清空表单
			this.formRef.current.resetFields()
		},100)
	}
	
	//点击编辑按钮
	handleUpdate = (record) => {
		this.setState({
			isCreateVisible: true,
			selectedItem: record,
			formTitle: "修改api"
		});
		setTimeout(()=>{
			//为模态框赋值
			this.formRef.current.setFieldsValue(record);
		},300)
	}
	
	//数据保存提交
	handleSubmit = values => {
		//新增url
		let url = "/Manager/PermitMng/apiCreate";
		//修改url
		if(this.state.formTitle === "修改api"){
			url = "/Manager/PermitMng/apiUpdate";
			values.id = this.state.selectedItem.id;
		}
		axios.ajax({
			url: url,
			method: "post",
			data: values
		}).then(res=>{
			if(res.code === 0){
				message.success(res.msg);
				this.requestList(this.state.requestParams);
			}
		}).catch(err=>{
		})
		this.setState({
			isCreateVisible: false
		})
		this.formRef.current.resetFields();
	}
	
	//删除
	handleDelete = record => {
		Modal.confirm({
			title: `确认删除 ？`,
			icon: <ExclamationCircleOutlined />,
			content: "一经删除，不能恢复",
			okText: "确认删除",
			cancelText: "取消",
			onOk:()=>{
				axios.ajax({
					url: "/Manager/PermitMng/apiDelete",
					method: "post",
					data: {id: record.id}
				}).then(res=>{
					if(res.code === 0){
						message.success(res.msg);
						this.requestList({
							field: "", 
							value: "", 
							page: 1, 
							limit: 5
						});
					}
				})
			}
		})
	}
	
	componentDidMount(){
		//获取公告列表信息
		this.requestList(this.state.requestParams);
	}
	
	render(){
		const layout = {
		    labelCol: { span: 4 },
		    wrapperCol: { span: 20 },
		};
		const tailLayout = {
		    wrapperCol: { offset: 4, span: 20 },
		};
		const columns = [
			{
				title: "名称",
				dataIndex: "remark"
			},{
				title: "api路径",
				dataIndex: "api_addr"
			},{
				title: "父级pid",
				dataIndex: "pid"
			},{
				title: '操作',
				key: 'action',
				fixed: 'right',
				width: 150,
				render: (text, record) => {
					return <div>
						<Tag color="#108ee9" onClick={() => this.handleUpdate(record)}>编辑</Tag>
						<Tag color="#f45656" onClick={() => this.handleDelete(record)}>删除</Tag>
					</div>
				}
			}
		];
		const count = this.state.count;
		const current = this.state.requestParams.page;
		const pageSize = this.state.requestParams.limit;
		return (
			<div style={{padding: 20}}>
				<Card className="page-search-wrap">
					<Button type="primary" onClick={this.handleCreate}>添加api</Button>
				</Card>
				<Card>
					<Table
						columns={columns}
						dataSource={this.state.dataSource}
						pagination={false}
					/>
					<ConfigProvider locale={zhCN}>
						<Pagination
							showQuickJumper
							showSizeChanger
							current={current}
							defaultPageSize={pageSize}
							total={count}
							showTotal={total => `共 ${total} 条`}
							pageSizeOptions={this.state.pageSizeOptions}
							onChange={this.pageChange}
							onShowSizeChange={this.pageSizeChange}
						/>
					</ConfigProvider>
				</Card>
				<Modal
					title={this.state.formTitle}
					visible={this.state.isCreateVisible}
					onCancel={()=>this.setState({isCreateVisible: false})}
					footer={null}
				>
					<Form
						{...layout}
						ref={this.formRef}
						onFinish={this.handleSubmit}
					>
						<Form.Item
							label="api路径"
							name="api_addr"
							rules={[
								{required: true, message: "请输入"},
								{max: 30, message: "请输入正确的路径"},
							]}
						>
							<Input autoComplete="off" />
						</Form.Item>
						<Form.Item
							label="父级pid"
							name="pid"
							rules={[
								{required: true, message: "请输入id"},
								{max: 10, message: "请输入正确的pid"},
							]}
						>
						    <Input autoComplete="off" />
						</Form.Item>
						<Form.Item
							label="备注"
							name="remark"
						>
						    <Input autoComplete="off" />
						</Form.Item>
						<Form.Item  {...tailLayout}>
							<Button type="primary" htmlType="submit">
							    保存
							</Button>
							<Button htmlType="button" onClick={()=>this.formRef.current.resetFields()}>
								重置
							</Button>
						</Form.Item>
					</Form>
				</Modal>
			</div>
		)
	}
}

export default IpPage;